// import React from 'react';
// class Test extends React.Component {
//     constructor(props) {
//         super(props);
//         this.state = {
//             count: 0,
//         };
//     }
//     componentDidMount() {
//         document.title = `${this.state.count} times`;
//     }
// componentDidUpdate(prevProps, prevState) {
//     if(prevProps.state !== this.state.count) {
//         document.title = `${this.state.count} times`;
//     }
// }
//     render() {
//         return (
//             <div>
//                 <p>You clicked {this.state.count}</p>
//                 <button
//                     onClick={() => {
//                         this.setState({ count: this.state.count + 1 });
//                     }}
//                 >
//                     click me
//                 </button>
//             </div>
//         );
//     }
// }
// export default Test;

import { useEffect, useState } from 'react';

function Test() {
    const [count, setCount] = useState(0);
    useEffect(() => {
        document.title = `${count} times`;
    }, []);
    // 请记得 React 会等待浏览器完成画面渲染之后才会延迟调用 useEffect
    // 如果第二个参数【】 传入的是null effect 内部的 props 和 state 就会一直拥有其初始值
    return (
        <div>
            <p>You click {count}</p>
            <button
                onClick={() => {
                    setCount(count + 1);
                }}
            >
                click me
            </button>
        </div>
    );
}
export default Test;

/**
 * 
 * useEffect和useLayoutEffect，是两个工作方式很相似的React Hook。
 * 
 *
useEffect(() => {
	// 执行副作用
	return () => { // clean up}
}, [dependency, arr])

useLayoutEffect(() => {
	// 执行副作用
	return () => { // clean up}
}, [dependency, array])


useEffect是在渲染函数执行完成，并绘制到屏幕之后，再异步执行。
大概流程如下：

触发渲染函数执行（改变状态，或者父组件重新渲染）
React调用组件的渲染函数
屏幕中重绘完成
执行useEffect


useLayoutEffect，是在渲染函数执行之后，但是屏幕重绘前同步执行。（注意：它可能会影响渲染体验）
大概流程如下：

触发渲染函数执行（改变状态，或者父组件重新渲染）
React调用组件的渲染函数
执行useLayoutEffect，并且React等待它执行完成
屏幕中重绘完成

大部分的场景都是通过effect同步一些状态或者props，这些是不需要立即执行的，或者做一些不影响页面显示的事情。
例如请求远程数据，是不需要立即应用结果修改的。
或者设置某个事件监听
或者在弹窗显示/消失的时候，重置某些状态
大部分的场景，useEffect足够了。

什么时候使用useLayoutEffect?

如果状态更新，导致组件渲染闪烁，这个时候，就应该用useLayoutEffect，例如初次渲染只有部分状态正确，然后立刻使用最终状态重新渲染时，可能会发生上述情况。
让我用一个例子来说明具体情况。
当你点击页面时，状态立即发生改变（value 重置为0），此时会立刻出发组件重新渲染，并重绘到屏幕上，然后effect执行，将value设置为某个随机数，同时再次立刻触发重新渲染。
这样就会导致2次渲染连续发生。

*/
